<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两面翻转的盒子</title>
	</head>
	<style>
		body{
			perspective: 3000;
		}
		.father{
			width: 400px;
			height: 400px;
			/* border: 1px solid #000000; */
			margin: 0 auto;
			line-height: 400px;
			text-align: center;
			position: relative;
			transition: all .4s;
			transform-style: preserve-3d;
		}
		.before{
			width: 400px;
			height: 400px;
			border-radius: 50%;
			background-color: #00BF6C;
			position: absolute;
			top: 0px;
			right: 0px;
			z-index: 1;
			
		}
		.after{
			width: 400px;
			height: 400px;
			border-radius: 50%;
			background-color: #55aaff;
			position: absolute;
			top: 0px;
			right: 0px;
			transform: rotateY(180deg)
		}
		.father:hover {
			transform: rotateY(-180deg)
		}
	</style>
	<body>
		<div class="father">
			<div class="before">前面</div>
			<div class="after">后面</div>
		</div>
	</body>
</html>
